<template>
  <view class="bookTemplate-page">
    <span class="desc">选择您的记账模板，为您匹配最合适的分类标签</span>
    <ul class="temp-list">
      <li
        class="temp-item"
        v-for="(item, index) in templateList"
        :key="index"
        @click="onClickTemp(item)"
      >
        <img :src="bookImgList[item.tempBackGround]" alt="" />
        <view class="temp-name">{{ item.tempName }}</view>
      </li>
    </ul>
  </view>
</template>
<script lang="ts">
import Vue from 'vue'
import { booksTemplateItem, tag } from '@/type/books'
import { bookImgList } from '@/pages/bookPng'
export default Vue.extend({
  data() {
    return {
      bookImgList,
      params: {
        pageSize: 10,
        pageNum: 1,
      },
      templateList: [] as booksTemplateItem[],
    }
  },
  methods: {
    getDefaultBookTemp() {
      this.$api.getDefaultBookTempApi(this.params).then((res: any) => {
        this.templateList = res.data.list
      })
    },
    onClickTemp(temp: booksTemplateItem) {
      const tagList = temp.tagList
        .filter((tags: tag) => tags.defaultTag === '默认')
        .map((tag: tag) => {
          tag.operateType = 1
          return tag
        })
      this.$store.commit('books/SET_BOOKNAME', temp.tempName)
      this.$store.commit('books/SET_BOOKID', undefined)
      this.$store.commit('books/SET_BOOKICON', temp.tempBackGround)
      this.$store.commit('books/SET_TAGLIST', this.$cloneDeep(tagList))
      uni.navigateTo({ url: '/pages/books/bookSave' })
    },
  },
  mounted() {
    this.getDefaultBookTemp()
  },
})
</script>
<style lang="less" scoped>
.bookTemplate-page {
  padding: 0 48rpx;
  .desc {
    font-size: 28rpx;
    color: #999;
  }
  .temp-list {
    display: grid;
    grid-template-columns: repeat(3, 33.33%);
    .temp-item {
      height: 260rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 20rpx;
      img {
        width: 150rpx;
        height: 200rpx;
        box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(71, 107, 160, 0.1);
        margin-bottom: 20rpx;
      }
      .temp-name {
        font-size: 30rpx;
        color: #333;
      }
    }
  }
}
</style>